<template>
	<view class="body">
		<view class="tops">
			<view class="shop">
				<image :src="shop_info.category_image" mode="aspectFill" class="Boutique"></image>
				<view class="title">
					{{shop_info.shop_name}}
				</view>
				<view class="right" @click="toggle">
					<view class="size">
						切换
					</view>
					<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="icon"></image>
				</view>
			</view>
			<headerTwo ref="header" :isLoading="isLoading" @changeIndex="changeHeaderIndex" @dateConfirm="dateConfirm" @refresh="$u.debounce(refresh,500)">
			</headerTwo>
			<view class="search">
				<u-search placeholder="搜索会员姓名、手机号" :show-action="false" shape="square" v-model="query.search"
					@change="$u.debounce(getSearch,500)"></u-search>
			</view>
			<view class="tabs">
				<view class="salary_box" @click="durationShow = !durationShow">
					<view class="size" :style="{color:query.duration_form == 'all'?'#333333':'#73F0EA'}">
						{{query.duration_form == 'all'?'所有卡':durationParams[durationIndex]}}
					</view>
					<u-icon :name="cardShow?'arrow-up':'arrow-down'" color="#999999" size="14"></u-icon>
				</view>
				<view class="Item" v-for="(item,index) in tabslist" :key="index" @click.stop="changeNavIndex(index)">
					<text class="size" :style="{color:activeIndex == index ?'#73F0EA':'#666666'}">{{item}}</text>
					<view class="bar" :style="{background:activeIndex == index ?'#73F0EA':''}">

					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower">
			<view class="comlum_box" v-if="list.length">
				<view v-for="(item,index) in list" :key="index" class="Item">
					<view class="header">
						<image :src="$IMG_URL('/static/user/logo1.png')" mode="aspectFill" class="logo"></image>
						<view class="center">
							<image :src="$IMG_URL('/static/test/memberlogo1.png')"  mode="aspectFill" class="memberSize"></image>
						</view>
						<view :class="{
							'color1': item.state === 'effect',
							'color2': item.state === 'past',
							'color3': item.state === 'enabled'
							}">{{
							item.state_str
						}}</view>
					</view>
					<view class="bottom">
						<view class="title">
							{{item.title}}
						</view>
						<view class="size1 mb">
							有效期限：{{item.date_str}}
						</view>
						<view class="size1">
							添加日期：{{item.add_date}}
						</view>
					</view>
					<view class="user_box">
						<image :src="item.avatar" mode="aspectFill" class="avater"></image>
						<view class="right">
							<view class="title">
								{{item.username}}
							</view>
							<view class="center_socund">
								<image :src="$IMG_URL('/static/test/phone.png')" mode="aspectFill" class="phone"></image>
								<text class="size2">{{item.mobile}}</text>
								<view class="call all_mr" @click.stop="$COPY(item.mobile)">
									复制
								</view>
								<view class="call" @click.stop="opentelephoneShow(item)">
									拨打
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			<empty v-else :content="!TabsCurrent ?'全部会员卡':TabsCurrent == 1 ?'使用中会员卡':TabsCurrent == 2 ?'已过期会员卡':'未启用会员卡'"></empty>
		</scroll-view>
		<Loading v-if="isLoading" :logo="$IMG_URL('/static/newVersion/login3.png')" color="#4ECDC4" :speed="1000"
			:bounceHeight="50" text="数据加载中" />
		<telephone :telephoneShow="telephoneShow" :telephone="mobileNumber" @cancel="callCancel" @sure="callSure">
		</telephone>
		<FieldPopupVue :popupShow="popupShow" :FieldList="Field" @sure="sure" @changeActiveIndex="changeActiveIndex"
			:activeIndex="FieldIndex"></FieldPopupVue>
		<u-picker v-model="durationShow" mode="selector" :range="durationParams" :customTimeTag="true" :title="'卡类型'"
			:popupheight="'786rpx'" :borderRadius="16" @confirm="changeduration"></u-picker>
	</view>
</template>

<script>
	import {
		atShop,
		storeCardList
	} from '@/api/manager.js'
	import headerTwo from '../coach/components/header2.vue'
	import FieldPopupVue from '../../pages/user/components/Field-popup.vue'
	import telephone from '@/components/telephone.vue'
	import empty from '@/components/empty.vue'
	export default {
		components: {
			headerTwo,
			FieldPopupVue,
			telephone,
			empty
		},
		data() {
			return {
				isLoading:false,
				durationParams: ['全部', '年卡', '半年卡', '季卡', '月卡', '周卡', '体验卡'],
				durationShow: false,
				durationIndex: 0,
				status: 'loadmore', //当前状态
				query: {
					shop_id: '',
					duration_form: 'all',
					form: 'all',
					search: '',
					date_form: 'day',
					date: '',
					page: 1
				},
				mobileNumber:'',
				telephoneShow: false,
				cardShow: false,
				FieldIndex: -1,
				shopName: '',
				popupShow: false,
				shop_info: {},
				activeIndex: 0,
				tabslist: [
					'全部',
					'使用中',
					'已过期',
					'未启用'
				],
				list: [],
			}
		},
		onLoad() {
			this.getatShop()
			this.getstoreCardList()
		},
		methods: {
			opentelephoneShow(item){
				this.telephoneShow = true
				this.mobileNumber = item.mobile
			},
			callSure() {
				let that = this
				uni.makePhoneCall({
					phoneNumber: that.mobileNumber, // 必填，需要拨打的电话号码
					success: function() {
						console.log('拨打电话成功！');
						// 这里可以添加拨打成功后的逻辑，比如提示用户
					},
					fail: function(err) {
						console.log('拨打电话失败：', err);
						// 这里可以添加拨打失败后的逻辑，比如提示用户错误原因
					}
				});
				this.telephoneShow = false
			},
			callCancel() {
				this.telephoneShow = false
			},
			getSearch() {
				this.list = []
				this.query.page = 1
				
				this.getChangeList()

			},
			refresh() {
				// 显示加载动画
				this.isLoading = true;

				// 重置查询参数和列表数据
				this.query.page = 1;
				this.list = [];

				// 模拟请求数据（在实际应用中，你应该使用真实的网络请求）
				setTimeout(() => {
					// 请求完成后隐藏加载动画
					this.isLoading = false;

					this.getChangeList()
				}, 1500); // 模拟请求延迟1.5秒
			},
			changeduration(e) {
				console.log('e', e);
				this.durationIndex = e
				if (!e) {
					this.query.duration_form = 'all'
				} else if (e == 1) {
					this.query.duration_form = 'year'
				} else if (e == 2) {
					this.query.duration_form = 'half'
				} else if (e == 3) {
					this.query.duration_form = 'season'
				} else if (e == 4) {
					this.query.duration_form = 'month'
				} else if (e == 5) {
					this.query.duration_form = 'week'
				} else if (e == 6) {
					this.query.duration_form = 'exp'
				}
				this.query.page = 1
				this.list = []
				this.getChangeList()
			},
			changeHeaderIndex(e) {
				this.$u.debounce(() => {
					this.query.date_form = e == 0 ? 'day' : e == 1 ? 'month' : 'year'
					this.query.date = this.$refs.header.day
					console.log('form', this.query.form);
					this.query.page = 1
					this.list = []
					this.getChangeList()
				}, 500)
				
			},
			dateConfirm(e, data) {
				this.$u.debounce(() => {
					console.log('e321', data);
					this.query.date = data
					this.query.page = 1
					this.list = []
					this.getChangeList()
				}, 500)
				
			},
			scrolltolower() {
				this.query.page++
				this.getstoreCardList()
			},
			getChangeList(){
				if (this.isLoading) {
					console.log('请求未完成，请稍后');
					return;
				}
				this.isLoading = true;
				storeCardList(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						const list = []
						this.status = 'loading'
						if (this.query.page > res.data.all_page) {
							console.log('nomore');
							this.status = 'nomore'
							return false
						} else {
							console.log('more');
							this.status = 'more'
							this.list = []
							this.list = this.list.concat(res.data.list)
						}
				
						console.log('list', this.list);
					}
				}).finally(() => {
					this.isLoading = false
				})
			},
			getstoreCardList() {
				if (this.isLoading) {
					console.log('请求未完成，请稍后');
					return;
				}
				this.isLoading = true;
				storeCardList(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						const list = []
						this.status = 'loading'
						if (this.query.page > res.data.all_page) {
							console.log('nomore');
							this.status = 'nomore'
							return false
						} else {
							console.log('more');
							this.status = 'more'
							this.list = this.list.concat(res.data.list)
						}

						console.log('list', this.list);
					}
				}).finally(() => {
					this.isLoading = false
				})
			},
			changeNavIndex(index) {
				console.log('index', index);
				this.$u.debounce(() => {
					if (this.activeIndex != index) {
						if (!index) {
							this.query.form = 'all'
						} else if (index == 1) {
							this.query.form = 'effect'
						} else if (index == 2) {
							this.query.form = 'past'
						} else if (index == 3) {
							this.query.form = 'enabled'
						}
						this.activeIndex = index
						this.list = []
						this.query.page = 1
						this.getChangeList()
					}
				}, 500)
				
				
			},
			sure() {
				this.popupShow = false
			},
			changeActiveIndex(item, index) {
				this.$u.debounce(() => {
					this.FieldIndex = index
					this.getatShop({
						shop_id: item.shop_id
					})
					this.query.shop_id = item.shop_id
					this.list = []
					this.query.page = 1
					this.getChangeList()
				}, 500)
				
			},
			toggle() {
				console.log(11);
				this.popupShow = true
			},
			getatShop(e) {
				atShop(e).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.shop_info = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;

		.tops {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 750rpx;
			padding: 24rpx 0 0;
			background: #ffffff;

			.shop {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 22rpx;
				padding: 0 23rpx;

				.Boutique {
					width: 114rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}

				.title {
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;

					.size {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #666666;
						margin-right: 8rpx;
					}

					.icon {
						width: 10rpx;
						height: 16rpx;
					}
				}
			}

			.search {
				width: 100%;
				padding: 24rpx;
			}

			.tabs {
				width: 750rpx;
				height: 88rpx;
				background: #ffffff;
				box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(199, 205, 179, 0.15);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				padding-top: 25rpx;

				.salary_box {
					display: flex;
					flex-direction: row;
					align-items: center;

					.size {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: right;
						color: #333333;
						margin-right: 7rpx;
					}

				}

				.Item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.size {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: center;
						color: #666666;
						margin-bottom: 12rpx;
					}

					.bar {
						width: 44rpx;
						height: 8rpx;
						border: 2rpx solid rgba(0, 0, 0, 0.00);
						border-radius: 2rpx;
					}
				}
			}
		}

		.scroll-y {
			width: 100%;
			height: 76vh;

			.comlum_box {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 24rpx;

				.Item {
					width: 702rpx;
					height: 420rpx;
					display: flex;
					flex-direction: column;
					background-image: url(https://ugeego.youjixiaoyang.com/static/shop/card.png);
					background-repeat: no-repeat no-repeat;
					background-size: cover;
					margin-bottom: 20rpx;
					border-radius: 34rpx;

					.header {
						width: 100%;
						height: 90rpx;
						padding: 0 36rpx 0 36rpx;
						display: flex;
						flex-direction: row;
						align-items: center;

						.logo {
							width: 48rpx;
							height: 48rpx;
							margin-right: 12rpx;
						}

						.center {
							display: flex;
							flex-direction: row;
							align-items: center;
							flex: 1;

							.memberSize {
								width: 302rpx;
								height: 46rpx;
							}
						}

						.color1 {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: right;
							color: #48b0a9;
						}

						.color2 {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: right;
							color: #999999;
						}

						.color3 {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: right;
							color: #ee8e3a;
						}
					}

					.bottom {
						width: 100%;
						height: 170rpx;
						padding: 36rpx;
						display: flex;
						flex-direction: column;

						.title {
							opacity: 0.6;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #000000;
							margin-bottom: 12rpx;
						}

						.mb {
							margin-bottom: 12rpx;
						}

						.size1 {
							opacity: 0.4;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #000000;
						}
					}

					.user_box {
						padding: 36rpx 36rpx 0;
						display: flex;
						flex-direction: row;
						align-items: center;

						.avater {
							width: 92rpx;
							height: 92rpx;
							background: rgba(0, 0, 0, 0.00);
							border-radius: 50%;
							margin-right: 19rpx;
						}

						.right {
							display: flex;
							flex-direction: column;
							flex: 1;

							.title {
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Bold;
								font-weight: 700;
								text-align: left;
								color: #333333;
								margin-bottom: 13rpx;
							}

							.center_socund {
								display: flex;
								flex-direction: row;
								align-items: center;
								margin-bottom: 12rpx;

								.phone {
									width: 20rpx;
									height: 30rpx;
									margin-right: 7rpx;
								}

								.size2 {
									font-size: 28rpx;
									font-family: PingFang SC, PingFang SC-Medium;
									font-weight: 500;
									text-align: left;
									color: #666666;
								}

								.call {
									margin-left: 28rpx;
									font-size: 28rpx;
									font-family: PingFang SC, PingFang SC-Medium;
									font-weight: 500;
									text-align: left;
									color: #48b0a9;
								}
							}
						}
					}
				}
			}
		}
	}
</style>